define(function(require,exports,module){

	var SVGs = {
		'balls': '/svg/loading-balls.svg',
		'bars': '/svg/loading-bars.svg',
		'bubbles': '/svg/loading-bubbles.svg',
		'cubes': '/svg/loading-cubes.svg',
		'cylon': '/svg/loading-cylon.svg',
		'spin': '/svg/loading-spin.svg',
		'spinning-bubbles': '/svg/loading-spinning-bubbles.svg',
		'spokes': '/svg/loading-spokes.svg'
	};

	var React = require('react');

	module.exports = React.createClass({
		displayName:'Loading',
		getDefaultProps: function() {
			return {
				color: '#fff',
				height: 64,
				type: 'balls',
				width: 64
			};
		},
		propTypes: {
			color: React.PropTypes.string,
			height: React.PropTypes.oneOfType([
			  	React.PropTypes.number,
			  	React.PropTypes.string
			]),
			type: React.PropTypes.string,
			width: React.PropTypes.oneOfType([
			  	React.PropTypes.number,
			  	React.PropTypes.string
			])
		},
		render: function () {
	    	var svg = SVGs[this.props.type];
	    	var svgStyle = {
	      		fill: this.props.color,
	      		height: this.props.height,
	      		width: this.props.width,
	    	};

	    	return (
				<div className="" style={{'margin':'50px 0','text-align':'center'}}>
	      			<img style={svgStyle} src={svg} />
				</div>
	    	);
	  	}
	});
});